<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <!-- table区域-begin -->
    <div style="margin-top:10px;">
      <a-table
        ref="table"
        size="default"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio'}"
        @change="handleTableChange">
        <span slot="templateContent" slot-scope="text">
          <j-ellipsis :value="text" :length="25" />
        </span>
      </a-table>
    </div>
   </j-modal>
</template>

<script>
  import { filterObj } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JEllipsis from "@/components/jeecg/JEllipsis";
  export default {
    name: "TenantDataConfigModal",
    components: {
      JFormContainer,JEllipsis
    },
    mixins:[JeecgListMixin],
    props:['templateId','templateType'],
    data () {
      return {
        title:'',
        width:800,
        visible: false,
        disableSubmit: false,
        confirmLoading:false,
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '模板CODE',
            align: "center",
            dataIndex: 'templateCode'
          },
          {
            title: '模板标题',
            align: "center",
            dataIndex: 'templateName'
          },
          {
            title: '模板内容',
            align: "center",
            dataIndex: 'templateContent',
            scopedSlots: {customRender: 'templateContent'},
          },
        ],
        url: {
          list: "/sys/message/sysMessageTemplate/list",
        },
        selectedRowKeys:[],
        selectionRows: [],
      }
    },
    watch: {
      templateId: {
        deep: true,
        immediate: true,
        handler(val) {
          if(!val){
            this.onClearSelected()
          }else{
            if(this.dataSource && this.dataSource.length>0){
              this.initData(this.dataSource)
            }
          }
        }
      },
      dataSource: {
        deep: true,
        handler(val) {
         this.initData(val)
        }
      },
    },
    async created(){
     
    },
    methods: {
      show () {
        this.visible=true
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      onSelectChange(selectedRowKeys, selectionRows) {
         this.selectedRowKeys = selectedRowKeys
         this.selectionRows = selectionRows
      },
      onClearSelected() {
        this.selectedRowKeys = []
        this.selectionRows = []
      },
      initData(dataSource){
        if(this.templateId){
          this.selectedRowKeys=[this.templateId]
          for(let item of dataSource){
            if(this.templateId==item.id){
              this.selectionRows = [item]
            }
          }
          this.handleOk()
        }
      },
      handleOk () {
        this.$emit('ok',this.selectionRows);
        this.visible = false;
      },
      handleCancel () {
        this.close()
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        param.templateType = this.templateType;
        return filterObj(param);
      },
    }
  }
</script>
<style lang="less" scoped>
  .table-operator{
    margin-top: 10px;
  }
</style>